<template>
  <div id="app">
    <!-- 全局头部 - 某些页面不需要 -->
    <AppHeader 
      v-if="!hideGlobalHeader"
      :is-logged-in="isLoggedIn"
      :username="userInfo.username"
      :user-type="userInfo.userType"
      @logout="handleLogout"
      @cart-updated="handleCartUpdate"
      @city-change="handleCityChange"
    />
    
    <!-- 收藏夹组件 - 在所有页面显示（除了后台管理界面） -->
    <SidebarFavorites 
      v-if="isLoggedIn && !isBackendPage"
      :is-logged-in="isLoggedIn"
      :user-id="userInfo.userId"
      class="global-sidebar-favorites"
    />
    
    <!-- 主内容区域 -->
    <main class="main-content">
      <router-view 
        @login-success="handleLoginSuccess"
        @add-to-cart="handleAddToCart"
      />
    </main>
    
    <!-- 底部区域 - 某些页面不需要 -->
    <div v-if="!hideGlobalFooter" class="b_btm_bg b_btm_c">
        <div class="b_btm">
            <div class="service-item">
                <img src="./assets/images/b1.png" width="62" height="62" />
                <div class="service-text">
                    <h2>正品保障</h2>
                    <span>正品行货  放心购买</span>
                </div>
            </div>
            <div class="service-item">
                <img src="./assets/images/b2.png" width="62" height="62" />
                <div class="service-text">
                    <h2>满38包邮</h2>
                    <span>满38包邮 免运费</span>
                </div>
            </div>
            <div class="service-item">
                <img src="./assets/images/b3.png" width="62" height="62" />
                <div class="service-text">
                    <h2>天天低价</h2>
                    <span>天天低价 畅选无忧</span>
                </div>
            </div>
            <div class="service-item">
                <img src="./assets/images/b4.png" width="62" height="62" />
                <div class="service-text">
                    <h2>准时送达</h2>
                    <span>收货时间由你做主</span>
                </div>
            </div>
        </div>
    </div>
    <div v-if="!hideGlobalFooter" class="b_nav">
    	<dl>                                                                                            
        	<dt><a href="#">新手上路</a></dt>
            <dd><a href="#">售后流程</a></dd>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">订购方式</a></dd>
            <dd><a href="#">隐私声明</a></dd>
            <dd><a href="#">推荐分享说明</a></dd>
        </dl>
        <dl>
        	<dt><a href="#">配送与支付</a></dt>
            <dd><a href="#">货到付款区域</a></dd>
            <dd><a href="#">配送支付查询</a></dd>
            <dd><a href="#">支付方式说明</a></dd>
        </dl>
        <dl>
        	<dt><a href="#">会员中心</a></dt>
            <dd><a href="#">资金管理</a></dd>
            <dd><a href="#">我的收藏</a></dd>
            <dd><a href="#">我的订单</a></dd>
        </dl>
        <dl>
        	<dt><a href="#">服务保证</a></dt>
            <dd><a href="#">退换货原则</a></dd>
            <dd><a href="#">售后服务保证</a></dd>
            <dd><a href="#">产品质量保证</a></dd>
        </dl>
        <dl>
        	<dt><a href="#">联系我们</a></dt>
            <dd><a href="#">网站故障报告</a></dd>
            <dd><a href="#">购物咨询</a></dd>
            <dd><a href="#">投诉与建议</a></dd>
        </dl>
        <div class="b_tel_bg">
        	<a href="#" class="b_sh1">新浪微博</a>            
        	<a href="#" class="b_sh2">腾讯微博</a>
            <p>
            服务热线：<br />
            <span>400-123-4567</span>
            </p>
        </div>
        <div class="b_er">
            <div class="b_er_c"><img src="./assets/images/er.gif" width="118" height="118" /></div>
            <img src="./assets/images/ss.png" />
        </div>
    </div>    
    <div v-if="!hideGlobalFooter" class="btmbg">
		<div class="btm">
        	备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com   Copyright © 2015-2018 尤洪商城网 All Rights Reserved. 复制必究 , Technical Support: Dgg Group <br />
            <img src="./assets/images/b_1.gif" width="98" height="33" /><img src="./assets/images/b_2.gif" width="98" height="33" /><img src="./assets/images/b_3.gif" width="98" height="33" /><img src="./assets/images/b_4.gif" width="98" height="33" /><img src="./assets/images/b_5.gif" width="98" height="33" /><img src="./assets/images/b_6.gif" width="98" height="33" />
        </div>    	
    </div>
    <!--End Footer End -->
  </div>
</template>

<script>
import AppHeader from '@/components/common/AppHeader.vue'
import SidebarFavorites from '@/components/common/SidebarFavorites.vue'

export default {
  name: 'App',
  components: {
    AppHeader,
    SidebarFavorites
  },
  data() {
    return {
      isLoggedIn: false,
      userInfo: {
        username: '',
        email: '',
        userId: '',
        userType: 0
      },
      selectedCity: '四川',
      cartItems: []
    }
  },
  //这里进行判断头文件和底部文件显示
  computed: {
    hideGlobalHeader() {
      // Category页面和登录页面使用自己的头部
      return this.$route.name === 'Category' || this.$route.name === 'Login' || this.$route.name === 'Register'
    },
    hideGlobalFooter() {
      // Category页面使用自己的底部
      return this.$route.name === 'Category'
    },
    isBackendPage() {
      // 判断是否为后台管理界面
      const backendRoutes = ['Admin', 'Dashboard', 'UserManagement', 'ProductManagement', 'OrderManagement']
      return backendRoutes.includes(this.$route.name)
    }
  },
  methods: {
    handleLoginSuccess(userInfo) {
      this.isLoggedIn = true
      this.userInfo = userInfo
      // 确保userId也被设置
      this.userInfo.userId = userInfo.id || userInfo.userId || ''
      this.$message.success('欢迎回来！')
    },
    handleLogout() {
      this.isLoggedIn = false
      this.userInfo = {
        username: '',
        email: '',
        userId: ''
      }
      localStorage.removeItem('userInfo')
      localStorage.removeItem('token')
      this.$message.success('已退出登录')
      this.$router.push('/')
    },
    handleAddToCart(product) {
      // 处理添加到购物车的逻辑
      const existingItem = this.cartItems.find(item => item.id === product.id)
      if (existingItem) {
        existingItem.quantity += product.quantity || 1
      } else {
        this.cartItems.push({
          ...product,
          quantity: product.quantity || 1
        })
      }
      this.$message.success('商品已加入购物车')
    },
    handleCartUpdate(cartItems) {
      this.cartItems = cartItems
    },
    handleCityChange(city) {
      this.selectedCity = city
      // 可以在这里保存用户选择的城市
      localStorage.setItem('selectedCity', city)
    },
    checkLoginStatus() {
      // 检查本地存储中的登录状态
      const userInfo = localStorage.getItem('userInfo')
      if (userInfo) {
        try {
          const user = JSON.parse(userInfo)
          this.isLoggedIn = true
          this.userInfo = user
          // 确保userId也被设置
          this.userInfo.userId = user.id || user.userId || ''
          // 从本地存储中读取用户类型信息
          this.userInfo.userType = localStorage.getItem('userType') || ''
        } catch (e) {
          console.error('解析用户信息失败:', e)
        }
      }
      
      // 检查城市选择
      const savedCity = localStorage.getItem('selectedCity')
      if (savedCity) {
        this.selectedCity = savedCity
      }
    }
  },
  created() {
    this.checkLoginStatus()
  }
}
</script>

<style>
#app {
  font-family: "Microsoft YaHei", "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #555555;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.main-content {
  flex: 1;
  min-height: calc(100vh - 200px);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 收藏夹全局样式 */
.global-sidebar-favorites {
  position: fixed;
  top: 150px;
  left: 20px; /* 更靠左的位置 */
  z-index: 1000;
}

/* 底部样式 */
.b_btm_bg{
  width:100%; min-width:1200px; height:122px; overflow:hidden; margin-top:30px;
}
.b_btm_c{
  background-color:#FFF;
}
.b_btm{
  width:1200px; height:122px; overflow:hidden; margin: 0 auto; display: flex; align-items: center; justify-content: space-around;
}
.service-item {
  display: flex;
  align-items: center;
  width: 210px;
  height: 62px;
  color: #888888;
  font-size: 14px;
}
.service-item img {
  margin-right: 10px;
}
.service-text h2 {
  color: #3e3e3e;
  font-size: 16px;
  font-weight: normal;
  margin: 0 0 5px 0;
}
.service-text span {
  color: #888888;
  font-size: 14px;
}

.b_nav{
  width:1200px; overflow:hidden; margin:20px auto; display: flex; justify-content: space-between;
}
.b_nav dl{
  width:125px; height:165px; overflow:hidden; margin-right:50px;
}
.b_nav dl dt{
  height:30px; line-height:30px; overflow:hidden; color:#3e3e3e; font-size:16px; margin-bottom:10px;
}
.b_nav dl dt a{
  color:#3e3e3e;
}
.b_nav dl dt a:hover{
  color:#3e3e3e; text-decoration:underline;
}
.b_nav dl dd{
  height:24px; line-height:24px; overflow:hidden; color:#888888;
}
.b_nav dl dd a{
  color:#888888;
}
.b_nav dl dd a:hover{
  color:#ff4e00;
}

.b_er{
  width:120px; height:160px; overflow:hidden; text-align:center; margin-right:22px; margin-top:5px;
}
.b_er_c{
  width:118px; height:118px; overflow:hidden; margin-bottom:10px; border:1px solid #e9e9e9;
}
.b_tel_bg{
  width:133px; height:140px; overflow:hidden; color:#888888; margin-top:5px;
}
.b_tel_bg a.b_sh1{
  width:100%; height:35px; line-height:35px; overflow:hidden; background:url('./assets/images/b_sh_1.png') no-repeat left center; color:#888888; font-size:14px; text-indent:32px; display:inline-block;
}
.b_tel_bg a.b_sh1:hover{
  color:#ff4e00;
}
.b_tel_bg a.b_sh2{
  width:100%; height:35px; line-height:35px; overflow:hidden; background:url('./assets/images/b_sh_2.png') no-repeat left center; color:#888888; font-size:14px; text-indent:32px; display:inline-block;
}
.b_tel_bg a.b_sh2:hover{
  color:#ff4e00;
}
.b_tel_bg p{
  margin-top:10px;
}
.b_tel_bg p span{
  color:#ff4e00; font-size:18px;
}

.btmbg{
  width:100%; min-width:1200px; overflow:hidden; padding:30px 0 40px 0; border-top:1px solid #eaeaea;
}
.btm{
  width:1200px; overflow:hidden; color:#999999; font-family:"宋体"; text-align:center; margin: 0 auto;
}
.btm a{
  color:#999999;
}
.btm a:hover{
  color:#999999; text-decoration:underline;
}
.btm img{
  display:inline-block; margin:15px 5px 5px 5px; border:1px solid #d9d9d9; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
}

</style>